import React, { useState } from 'react'
import classes from './LoginByPhoneNumber.module.css'
import useCountDown from '../hooks/useCountdown'

const LoginByPhoneNumber = (props: any) => {
  const judgePhoneNumber = (phoneNumber: string) => {
    var regexp = /^1[3-9]\d{9}$/
    return regexp.test(phoneNumber)
  }

  const judgeVerificationCode = (verificationCode: string) => {
    return verificationCode.length === 6
  }

  const [haveChecked, setHaveChecked] = useState(false)

  const handleCheck = (event: {
    target: { checked: boolean | ((prevState: boolean) => boolean) }
  }) => {
    setHaveChecked(event.target.checked)
  }

  const [formData, setFormData] = useState({
    phoneNumber: '',
    verificationCode: '',
  })

  const phoneNumberChangeHandler = (e: { target: { value: string } }) => {
    setFormData({
      ...formData,
      phoneNumber: e.target.value,
    })
  }

  const verificationCodeChangeHandler = (e: { target: { value: string } }) => {
    setFormData({
      ...formData,
      verificationCode: e.target.value,
    })
  }
  //////////////////////////////////////////////////////////////////////
  // 设置初始值  定时器结束时候可以继续点击
  const { count, start } = useCountDown(
    props.phoneNumberLogin.codeFetchWaitTime,
    () => setSendAble(true)
  )
  // 默认刚开始可以点击
  const [sendAble, setSendAble] = useState(true)
  const onSendCode = () => {
    // 获得手机号
    props.onGetCode(formData.phoneNumber)
    // 开启定时器
    start()
    // 关闭
    setSendAble(false)
  }
  ///////////////////////////////////////////////////////////////////
  let warnMessage

  if (!judgePhoneNumber(formData.phoneNumber)) {
    warnMessage = (
      <div className={classes.confirmContent}>请输入正确的手机号码</div>
    )
  } else if (!judgeVerificationCode(formData.verificationCode)) {
    warnMessage = (
      <div className={classes.confirmContent}>请输入正确的验证码</div>
    )
  } else if (!haveChecked) {
    warnMessage = <div className={classes.confirmContent}>请阅读并同意协议</div>
  } else {
    warnMessage = <div />
  }

  const formSubmitHandler = (e: { preventDefault: () => void }) => {
    e.preventDefault()

    if (
      haveChecked &&
      judgePhoneNumber(formData.phoneNumber) &&
      judgeVerificationCode(formData.verificationCode)
    ) {
      const newLog = {
        phoneNumber: formData.phoneNumber,
        verificationCode: formData.verificationCode,
      }

      props.onLogin(newLog)
      props.onGetCode(formData.phoneNumber)

      setFormData({
        phoneNumber: '',
        verificationCode: '',
      })
    }
  }

  return (
    <div>
      <form onSubmit={formSubmitHandler}>
        <div className={classes.formItem}>
          <div className={classes.prefix}>+86</div>
          <label htmlFor="phoneNumber"></label>
          <input
            id="phoneNumber"
            type="text"
            onChange={phoneNumberChangeHandler}
            value={formData.phoneNumber}
            placeholder={'请输入手机号'}
            className={classes.text1}
          />
        </div>
        <div className={classes.formItem}>
          <label htmlFor="verificationCode"></label>
          <input
            id="verificationCode"
            type="text"
            onChange={verificationCodeChangeHandler}
            value={formData.verificationCode}
            placeholder={'请输入验证码'}
            className={classes.text2}
          />
          <button
            className={classes.getButton}
            onClick={onSendCode}
            disabled={!sendAble}
            style={{
              color: props.color,
              textAlign: 'center',
            }}>
            {sendAble ? '发送验证码' : count + '秒后重发'}
          </button>
        </div>
        <div
          className={classes.tips}
          style={{
            color: '#ff0000',
          }}>
          {warnMessage}
        </div>
        <div className={classes.checkBtn}>
          <input type="checkbox" id="cbox" onChange={handleCheck} />
          <label htmlFor="cbox">
            我已阅读并同意
            <a
              href="https://www.baidu.com/"
              className={classes.confirmContent}
              style={{
                color: props.color,
              }}>
              服务条款
            </a>
            、
            <a
              href="https://www.baidu.com/"
              className={classes.confirmContent}
              style={{
                color: props.color,
              }}>
              隐私政策
            </a>
          </label>
        </div>
        <div className={classes.formBtn}>
          <button
            className={classes.loginButton}
            style={{
              backgroundColor: props.color,
              borderColor: props.color,
            }}>
            登录
          </button>
        </div>
      </form>
    </div>
  )
}

export default LoginByPhoneNumber
